<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="/static/css/app.css">
    <title>Hello, world!</title>
</head>
<style>
    .hidden {
        display: none;
    }
    
    .jumbotron {
        overflow: auto;
    }
    
    #container {
        height: 900px;
        min-height: 900px;
    }
</style>

<body>
    <div id="app">
        <div class="container-fluid" id="container" style="padding:0">
            <div class="jumbotron " style="margin:0;height: 100%;">
                <ul class="list-group-flush row" style="margin:0;">
                    <li class="list-group-item  col-sm-4" v-for="(item,index) in list" style="background:none;">
                        <span v-text='item.project_name'></span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <!-- <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                list: [],
                headers: {
                    'token': "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiIsImp0aSI6Im1kZC00ZjFnMjNhMTJhYSJ9.eyJpc3MiOiJodHRwOlwvXC93d3cuaGxqbWRkLmNuIiwiYXVkIjoiaHR0cDpcL1wvd3d3Lmhsam1kZC5jbiIsImp0aSI6Im1kZC00ZjFnMjNhMTJhYSIsImlhdCI6MTU5Nzg4MjkwNSwiZXhwIjoxNjAwNDc0OTA1LCJ1aWQiOjN9.w-wmJ7k2Fdg5yM_74zzcpzL_ZtNfs6Cqrj_NmWNrDkc",
                    "accessToken": "N0IyMjY5NjQyMjNBMzEyQzIyNjE3MDcwNUY2OTY0MjIzQTIyMzI2OTM2.MzczMzY3NjQ2NjM2Njg3OTc0NkQ2QTM2NzUyMjJDMjI2MTcwNzA1Rjcz.NjU2MzcyNjU3NDIyM0EyMjc3NjM1NjdBNzg0ODQyNEQ0NDc3NzQ0RjdB.NkU2MjRENkQ0QTU4NTM2NTZBN0E2NTRDNTc3MzQxNjg2MTY4NjYyMjdE.YTFiNTBhNzNlNGU0Y2RlMjM0YTI4MDU5ODExY2RkY2U1ZjNjYjc2YTZiM2My",
                    "Content-Type": "text/plain;charset=UTF-8"
                }
            },
            mounted() {
                this.getData();
            },
            methods: {
                getData() {
                    axios.get("{:url('project/index')}", {
                        params: {},
                        headers: this.headers
                    }).then(resp => {
                        this.list = resp.data.data
                    }).catch(resp => {});

                }
            }
        })
    </script>
</body>

</html>